<template>
  <PDFExport :filename="`订单_`" :options="pdfOptions" :componentRef="container">
    <template #trigger="{ exportPDF }">
      <span class="w-4 h-4 rounded-full mr-2  flex items-center justify-center mx-1" @click.stop="exportPDF">
        <Icons name="icon-download-2" class="text-[16px]! text-black-500!" />
      </span>
    </template>
  </PDFExport>
  <div class="fixed top-2000px right-20000px z-50">
    <Page ref="container" />
  </div>
</template>

<script setup lang="ts">
import { Icons } from '../icons';
import { PDFExport } from '../PDFExport';
import Page from './page.vue';
// 无额外逻辑，留空
const container = ref<HTMLElement | undefined>()
const pdfOptions = {
  orientation: 'portrait' as const,
  format: 'a4' as const,
  margin: { top: 20, bottom: 20, left: 15, right: 15 }
}
onMounted(() => {
  console.log('container', container.value?.$el)
})
</script>

<style scoped>
/* 可选：微调图标或边框细节（若需） */
</style>